<template>
    <div class="m-4 mr-0 overflow-hidden bg-white dict-type-list">
        <ScrollContainer>
            <div class="dict-type-item flex h-36px items-center justify-between p-y-12px p-x-10px" :class="{'active-item': currentType === item.type}" v-for="(item, index) in typeList"
                :key="item.type" @click="chooseType(item.type)">
                <div class="left truncate">{{ index }}.<span class="ml-20px">{{ item.name }}-{{ item.type }}</span></div>
                <div class="right ml-20px" @click.stop>
                    <Tooltip title="编辑">
                        <form-outlined class="action-icon" @click="handleEdit(item)" />
                    </Tooltip>
                    <Tooltip title="删除">
                        <Popconfirm
                            title="删除将会同时删除字典数据，是否继续？"
                            @confirm="handleDelete(item)"
                        >
                            <delete-outlined class="ml-15px mr-25px action-icon" />
                        </Popconfirm>
                    </Tooltip>
                    <Tooltip title="状态">
                        <Switch :checked="item.status == '0'" @change="e => statusChange(e, item.id, index)" />
                    </Tooltip>
                </div>
            </div>
        </ScrollContainer>

        <DictTypeModal @register="registerModal" @success="reload()" />
    </div>
</template>

<script lang="ts" setup>
import DictTypeModal from './DictTypeModal.vue'
import { useModal } from '@/components/Modal'
import { deleteDictType, listSimpleDictType, updateDictTypeStatus } from '@/api/system/dict/type'
import { DictTypeV1 } from '@/api/system/dict/types'
import { useMessage } from '@/hooks/web/useMessage'
import { ref, onBeforeMount } from 'vue';
import { ScrollContainer } from '@/components/Container'
import { FormOutlined, DeleteOutlined } from '@ant-design/icons-vue'
import { Popconfirm, Switch, Tooltip } from 'ant-design-vue'
import { useI18n } from '@/hooks/web/useI18n'

const [registerModal, { openModal }] = useModal()
const { createMessage } = useMessage()
const { t } = useI18n()

const emit = defineEmits(['select'])

const currentType = ref('')
const chooseType = (type: string) => {
    if (type === currentType.value) return
    currentType.value = type
    emit('select', type)
}

const handleCreate = () => {
    openModal(true, { isUpdate: false })
}

const handleEdit = (record: Recordable) => {
    openModal(true, { record, isUpdate: true })
}

const handleDelete = async (record: Recordable) => {
    await deleteDictType(record.id)
    createMessage.success(t('common.delSuccessText'))
    reload()
}

const statusChange = async (flag, id, index) => {
    let status = flag ? '0' : '1'
    let p = {
        id,
        status
    }
    await updateDictTypeStatus(p)
    typeList.value[index].status = status
}

const reload = () => {
    getTypeList()
}

const typeList = ref<DictTypeV1[]>([])
const getTypeList = async () => {
    const res = await listSimpleDictType()
    let list = res || []
    typeList.value = list
    currentType.value = list.length > 0 ? list[0].type : ''
    emit('select', currentType.value)
}

onBeforeMount(() => {
    getTypeList()
})
</script>

<style lang="less" scoped>
.dict-type-list {

    .dict-type-item {

        &:hover {
            background-color: #f8f8f8;
        }
        &.active-item {
            background-color: rgba(45, 199, 109, .2);

            &:hover {
                background-color: rgba(45, 199, 109, .2);
            }
        }
        .left {
            flex: 1;
            color: #222;
            font-size: 14px;
            line-height: 20px;
        }
        .right {
            width: 120px;
            min-width: 100px;
            display: flex;
            align-items: center;
            flex-wrap: nowrap;

            .action-icon {
                font-size: 14px;

                &:hover {
                    color: #0b5fbd;
                }
            }
        }
    }
}
</style>